<template>
    <div class="box">
        <!-- 导航栏 -->
        <navlist title="分类"></navlist>
        <div style="height: 1.5rem;"></div>
        <!-- 布局 -->
        <van-row>
            <van-col span="4">
                <van-sidebar v-model="active">
                    <van-sidebar-item :title="v.cat_name" v-for="(v, i) in list" :key="i" />
                </van-sidebar>
            </van-col>
            <van-col span="18" offset="2">
                <van-pull-refresh v-model="loading" @refresh="onRefresh">
                    <div v-for="(v, i) in list[active]?.children" :key="i">
                        {{ v.cat_name }}
                        <van-grid :border="false" :column-num="3">
                            <van-grid-item v-for="(value, index) in v.children" :key="index">
                                <van-image :src="value.cat_icon" v-lazy="value.cat_icon" />
                                {{ value.cat_name }}
                            </van-grid-item>
                        </van-grid>
                    </div>
                </van-pull-refresh>
            </van-col>
        </van-row>
    </div>
</template>

<script setup>
import { ref } from "vue"

const active = ref(0);

import navlist from '@/components/navlist.vue';

import { categoriesApi } from "@/api/api";

let list = ref({})

const getList = () => {
    categoriesApi().then((res) => {
        console.log(res)
        list.value = res.data.message
    })
}
getList()

// 下拉刷新
import { showToast } from 'vant';

const loading = ref(false);
const onRefresh = () => {
    getList()
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
    }, 1000);
};

</script>

<style lang="scss" scoped></style>